<template>
  <div class="share-component" @click="handlerClick">
    <div class="icon">
      <img src="/static/images/icon/share.png" alt="">
    </div>
    <div class="title">分享</div>
    <button open-type="share"></button>
  </div>
</template>

<script>
export default {
  methods: {
    handlerClick () {
      this.$emit('handlerClick');
    }
  }
}
</script>

<style scoped lang='scss'>
.share-component {
  position: absolute;
  top: 50rpx;
  right: 40rpx;
  z-index: 3;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  background-color: #ddd;

  .icon {
    width: 38rpx;
    height: 32rpx;

    > img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .title {
    line-height: 36rpx;
    font-size: 24rpx;
    color: #fff;
  }

  button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
</style>
